<template>
  <div class="nearby-mechanism-view">
    <div class="header-container">
      <div class="search-location-container">
        <input class="input1" v-model="searchQuery.introductionName" placeholder="搜索机构/医生" @input="handleSearch" />
        <span class="iconfont icon-sousuo" @click="goBack">取消</span>
      </div>

    </div><div style="height: 63px; width: 100%"></div>
    <div v-if="institutionsAll.length > 0">
      <h3 style="margin-left: 20px;">团队搜索结果</h3>
      <div v-for="(item, index) in institutionsAll" :key="index" class="institution-item" @click="goToDetail(item)">
        <img :src="item.imageUrl" alt="机构图标" class="icon1" />
        <div class="info">
          <p class="name">{{ item.teamName }}</p>
          <p class="distance">3.6km</p>
        </div>
      </div>
    </div>
    <div v-if="doctorAll.length > 0">
      <h3 style="margin-left: 20px;">医生搜索结果</h3>
      <div v-for="(item, index) in doctorAll" :key="index" class="institution-item" @click="goToDetail(item)">
        <img :src="item.imageUrl" alt="机构图标" class="icon1" />
        <div class="info">
          <p class="name">{{ item.doctorName }}</p>
          <span class="distance">{{ item.position }}</span>
          <p class="distance">签约人数:{{ item.signUpCount }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      doctorAll: [],
      institutionsAll: [],
      searchQuery: {
        introductionName: ''
      }
    };
  },
  mounted() {
  },
  watch: {
    'searchQuery.introductionName': {
      handler(newValue) {
        console.log('搜索关键词:', newValue);
        if (newValue === '') {
          this.doctorAll = [];
          this.institutionsAll = [];
        } else {
          this.findDoctorAll();
          this.findInstitutionAll();
        }
      },
      immediate: true
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索关键词:', this.searchQuery);
    },
    goBack() {
      this.$router.go(-1);
    },
    goToDetail(item) {
      console.log('进入详情:', item);
    },
    findDoctorAll() {
      axios.post(`http://localhost:10086/api/doctor/doctor/findDoctorName`, this.searchQuery)
          .then(response => {
            if (response.data.code === 200) {
              console.log('获取医生列表成功:', response.data.data);
              this.doctorAll = response.data.data;
            } else {
              console.log('获取医生列表失败:', response.data.message);
            }
          })
          .catch(error => {
            console.error('请求出错:', error);
          });
    },
    findInstitutionAll() {
      axios.post(`http://localhost:10086/api/doctor/doctor_team/findDoctorTeamInstitution`, this.searchQuery)
          .then(response => {
            if (response.data.code === 200) {
              console.log('获取机构列表成功:', response.data.data);
              this.institutionsAll = response.data.data;
            } else {
              console.log('获取机构列表失败:', response.data.message);
            }
          })
          .catch(error => {
            console.error('请求出错:', error);
          });
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({ name: 'login' });
      }, 666);
    }
    // 设置全局默认请求头
    axios.defaults.headers.common['token'] = token;
  }
};
</script>

<style scoped>
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nearby-mechanism-view {
  background-color: #f5f9fc;
  height: 100%;
}

.icon-van {
  float: left;
  margin-left: -170px;
}

.title {
  margin: 10px auto;
}

.search-location-container {
  display: flex;
  align-items: center;
}

.location-img {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-right: 5px;
}

.input1 {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 200px;
  height: 30px;
  float: left;
  margin-left: 20px;
  margin-right: 20px;
}

.institution-item {
  padding: 20px;
  border: 0px solid #ccc;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: auto;
  margin-top: 20px;
  width: 80%;
  background-color: #ffffff;
}

.icon1 {
  width: 70px;
  height: 70px;
  margin-right: 10px;
  margin-top: 0px;
}

.info {
  flex: 1;
}

.name {
  margin: 0;
  font-size: 16px;
}

.distance {
  margin: 0;
  color: #666;
  font-size: 14px;
}
</style>